<template>
  <div>

    <div id="orderInfo" class="container">
      <div>
        <h1>讲师：{{order.teacherName}}</h1>
      </div>
      <div class="orderMiddle">
        <div>
          <img :src="order.courseCover" width="300px">
        </div>
        <div>
          <h3>{{order.courseTitle}}</h3>
        </div>
        <div class="right">

          <b>共1件商品，合计￥<font color="red" size="32px">{{order.totalFee}}</font></b>
        </div>
      </div>

      <div align="right">
        <button class="payBtn" @click="toPay">去支付</button>
      </div>
    </div>

  </div>


</template>

<script>
  import order from '@/api/order'
    export default {
        name: "order",
      data(){
          return{
            orderId:this.$route.params.id,
            order:{}//订单信息
          }
      },
      created() {
        //根据订单号查询订单
        this.getOrderInfo()
      },
      methods:{
        //根据订单号查询订单
        getOrderInfo(){
          order.getByOrderNo(this.orderId)
            .then(response=>{
              this.order = response.data
            })
        },
        toPay(){
          this.$router.push({path:'/pay/'+this.orderId})
        }


      }
    }
</script>

<style scoped>
#orderInfo{
  height: 500px;

}
.orderMiddle{ position: relative; height: 300px;}
.orderMiddle div{
  display: inline-block;

}
.orderMiddle .right{
  font-size: 25px;
  position: absolute;
  bottom: 0;
  right: 0;
}
  .payBtn{
    background: red;color: white;height: 70px;width: 250px;
    font-size: 25px;
  }
</style>
